<template>
  <div>
    <h2 style="text-align: center; margin: auto">用户新增</h2>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      style="margin: auto; width: 50%"
    >
      <el-form-item label="用户名" prop="username" :required="true">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password" :required="true">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
          :required="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age" :required="true">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex" :required="true">
        <el-input v-model="ruleForm.sex"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="nickname" :required="true">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" :required="false">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email" :required="false">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description" :required="false">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >注册</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "userAddView",
  data() {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      }
      callback();
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    var checkAge = (rule, value, callback) => {
      if (!value) {
        callback(new Error("年龄不能为空"));
      } else if (typeof value !== "number") {
        callback(new Error("年龄必须为数字"));
      }
      callback();
    };
    var checkSex = (rule, value, callback) => {
      if (!value) {
        callback(new Error("性别不能为空"));
      }
      callback();
    };
    var checkNickname = (rule, value, callback) => {
      if (!value) {
        callback(new Error("昵称不能为空"));
      }
      callback();
    };
    return {
      ruleForm: {
        password: "",
        username: "",
        age: "",
        sex: "",
        nickname: "",
        phone: "",
        email: "",
        description: "",
      },
      rules: {
        password: [{ validator: validatePassword, trigger: "blur" }],
        username: [{ validator: checkUsername, trigger: "blur" }],
        age: [{ validator: checkAge, trigger: "blur" }],
        sex: [{ validator: checkSex, trigger: "blur" }],
        nickname: [{ validator: checkNickname, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let user = {
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            age: this.ruleForm.age,
            sex: this.ruleForm.sex === "男" ? 0 : 1,
            nickname: this.ruleForm.nickname,
          };
          this.axios.post($API_URL + "/user/add", user).then((res) => {
            const data = res.data;
            if (data.state === 409) {
              this.$message({
                message: data.message,
                type: "error",
              });
            } else if (data.state === 200) {
              this.$message({
                message: data.message,
                type: "success",
              });
              this.$router.push("/userManager/list");
            }

            console.log(res.data);
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped></style>
